
<template>
  <page-card title="业务条线">
    <div class="table-page-search-wrapper">
      <slot name="searchWrapper" />
      <a-row v-if="!$slots.searchWrapper"
             type="flex"
             style="margin-bottom:20px"
             justify="end">
        <a-col v-if="hasPermission('add')"
               flex="3">
          <a-space>
            <slot name="buttons" />
            <template v-if="!$slots.buttons && hasPermission('add')">
              <a-button type="primary"
                        icon="plus"
                        @click="handleEdit()">
                新增
              </a-button>
            </template>
          </a-space>
        </a-col>
        <a-col v-if="hasPermission('showlist')"
               flex="1">
          <a-space>
            <a-input :maxLength="20"
                     placeholder="请输入线条名称进行查询"
                     v-model="businessLineName" />
            <slot name="buttons" />
            <template v-if="!$slots.buttons && hasPermission('showlist')">
              <a-button type="primary"
                        @click="search()">
                查询
              </a-button>
              <a-button type="primary"
                        @click="chongz()">
                重置
              </a-button>
            </template>
          </a-space>
        </a-col>
        <template>

        </template>
      </a-row>
    </div>
    <slot name="table" />
    <a-table v-if="!$slots.table"
             :columns="columns"
             :rowKey="(record, index) => index"
             :data-source="data"
             @change="handleTableChange"
             :pagination="pagination">
      <span slot="status"
            :style="{color:statusCell[record.status].color}"
            slot-scope="text, record">{{ statusCell[record.status].text }}</span>
      <!--<template slot="type"
								slot-scope="text,record">
				<span v-text="record.type == '1' ? '全局' : record.type == '2' ? '单位' : ''"></span>
			</template>-->
      <span slot="action"
            slot-scope="text, record">
        <template v-for="(action, index) in actionsFun(record)">
          <span :key="index">
            <a-divider type="vertical"
                       v-if="index>0" />
            <a v-if="action.code!='delete'"
               @click="action.fn(record.id,record.name)">
              {{ action.text }}
            </a>
            <a-popconfirm v-else
                          title="确认删除？"
                          ok-text="是"
                          cancel-text="否"
                          @confirm="action.fn(record.id)">
              <a href="javascript:;">
                {{ action.text }}
              </a>
            </a-popconfirm>
          </span>
        </template>
      </span>
    </a-table>
  </page-card>
</template>

<script>
import { del, page } from '../../api/businessline/index'
import { PAGINATION, TABLE_STATUS_CELL } from './constants'

export default {
  props: {
    onLoad: {
      type: Function,
      default: null
    },
    onDelete: {
      type: Function,
      default: null
    }
  },
  data () {
    return {
      data: [],
      pagination: PAGINATION,
      statusCell: TABLE_STATUS_CELL,
      queryParam: {
        isTest: '0'
      },
      actions: [],
      columns: [
        {
          title: '线条名称',
          width: 200,
          dataIndex: 'businessLineName'
        },
        {
          title: '线条范围',
          width: 200,
          dataIndex: 'businessLineRange'
        },
        {
          title: '所属单位',
          width: 120,
          dataIndex: 'createUnitName',
          ellipsis: true
        },
        {
          title: '创建人',
          align: 'center',
          width: 120,
          dataIndex: 'createBy'
        },
        {
          title: '创建时间',
          align: 'center',
          width: 150,
          dataIndex: 'createTime',
          customRender: (v) => v.split(' ')[0]
        },
        {
          title: '操作',
          width: 150,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      businessLineName: ''
    }
  },
  created () {
    // 未重写table，调用默认加载列表数据接口
    !this.$route.meta.keepAlive && !this.$slots.table && this.load()
  },
  activated () {
    // 未重写table，调用默认加载列表数据接口
    !this.$slots.table && this.load()
  },
  methods: {
    actionsFun (record) {
      let actions = []
      let width = 180,
        me = this
      if (
        !record.shareRoleFlag &&
        this.hasPermission('update') &&
        (width += 28)
      ) {
        actions.push({
          text: '编辑',
          code: 'update',
          fn: this.handleUpdate
        })
      } else {
        width += 28
      }
      if (
        !record.shareRoleFlag &&
        this.hasPermission('delete') &&
        (width += 28)
      ) {
        actions.push({
          text: '删除',
          code: 'delete',
          fn: this.handleDelete
        })
      } else {
        width += 28
      }

      if (this.hasPermission('impower') && (width += 28)) {
        actions.push({
          text: '角色授权',
          code: 'impower',
          fn: this.handleImpower
        })
      }
      if (this.hasPermission('dataImpower') && (width += 28)) {
        actions.push({
          text: '数据授权',
          code: 'dataImpower',
          fn: this.handleDataImpower
        })
      }
      if (actions.length > 0) {
        this.columns[this.columns.length - 1].width = width
      }
      return actions
    },
    chongz () {
      this.businessLineName = ''
      this.search()
    },
    search () {
      this.pagination.current = 1
      this.load()
    },
    load () {
      this.queryParam.currPage = this.pagination.current
      this.queryParam.pageSize = this.pagination.pageSize
      this.queryParam.businessLineName = this.businessLineName

      page({ ...this.queryParam }).then((response) => {
        this.data = response.list
        this.pagination.current = response.currPage
        this.pagination.total = response.totalCount
        this.pagination.pageSize = response.pageSize
      })
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination = pagination
      this.load()
    },
    handleEdit (id) {
      this.$router.push({
        path: '/businessline/add'
      })
    },
    handleUpdate (id) {
      this.$router.push({
        path: '/businessline/update',
        query: { id }
      })
    },
    handleImpower (id, name) {
      this.$router.push({
        path: '/role/impower',
        query: { id, name }
      })
    },
    handleDataImpower (id, name) {
      this.$router.push({
        path: '/role/dataImpower',
        query: { id, name }
      })
    },
    handleDelete (id) {
      const params = {
        id: id
      }
      del(params).then((res) => {
        this.search()
      })
    }
  },
  watch: {
    'queryParam.isTest': {
      handler (newValue, oldValue) {
        this.load()
      }
    }
  }
}
</script>

<style>
</style>
